<!--
 * @Description: 订单详情页面
 * @Author: Ronda
 * @Date: 2021-08-10 13:23:06
 * @LastEditors: 侯晨辉
 * @LastEditTime: 2022-05-15 11:23:28
-->
<template>

  <div>
    <div class="shu">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh" head-height="2000"  pull-distance="5">
      <!-- <p>刷新次数: {{ count }}</p> -->
      </van-pull-refresh>
    </div>
    <!-- {{productData}} -->
    <!--头部-->
  <div>
    <van-nav-bar
      title="订单详情"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
  </div>
    
  <!--订单内容-->
  
  <div class="information">
    <!-- <van-col span="24"> -->
      <van-card
        v-for="item in productData"
        num="1"
        :key="item.id"
        :price="item.price"
        :desc="item.description"
        :title="item.name"
        :thumb="item.photo"
      />
    <!-- </van-col> -->
  </div>

  <!-- 总销售额度 -->
    <div class="count">
      总计：
    </div>
    <div class="money">
      ${{totalPrice}}
    </div>
  <br><br>
  <!--地址等信息-->
    <div class="local-box" v-for="item in productLocal" :key="item.id" :total="item.total">
      <div class="local-a">服务地址: 上海市上海市静安区静安区 </div>
      <div class="local-b">联系方式: {{item.customer.username}}({{item.customer.telephone}})</div>
      <div class="local-c">下单时间: 2022/5/14 21:22 </div>
      <div class="local-d">服务时间: 2022/5/14 21:22 </div>
      <div class="local-e">{{item.status}}</div>
    </div>
  </div>
   
</template>

<script>
import { pageQueryProductCategory, pageQueryProduct,pageLocal } from "@/api/index.js";
import { Toast } from 'vant';
export default {

  data() {
    return {
      //产品信息
      productData:[],
      //地址信息
      productLocal:[],
      totalPrice: 0,
      count: 0,
      isLoading: false,

    };
  },
  computed: {},
  methods: {

     onRefresh() {
      setTimeout(() => {
        Toast('刷新成功');
        this.isLoading = false;
        this.count++;
        }, 1000);
      },
      
    //加载产品数据
    async loadProduct(){
      let res = await pageQueryProduct({page:1,pageSize:2});  //产品数量
      this.productData=res.data.data.list;
      let total=0;
      this.productData.forEach((item) => {
        if (item.id > 0) {
          total = total+item.price;
        }
      });
      this.totalPrice=total;
    },
    async loadProductLocal(){
      let res = await pageLocal({page:1,pageSize:1});
      this.productLocal=res.data.data.list;
    }
  },
  created() {
    this.loadProduct();
    this.loadProductLocal();
  },
  mounted() {}
};
</script>
<style scoped>

.van-card{
  border-bottom:2px solid #D8BDFF;
  border-right:2px solid #D8BDFF;
  border-radius: 0% 10px 10px 10px;
  margin-right: 10px;
  margin-left: 10px;

}

/* 总价 */
.count{
  margin-top: 10px;
  padding-left: 350px;
  /* padding: 10px; */
}
.money{ 
  /* border: 1px solid red; */
  margin-top: -16px;
  margin-right: 20px;
  /* width: 30px; */
  padding-left: 380px;
  color: red;
} 
/* 地址信息 */

.local-box{
  /* border: 1px solid red; */
  margin-bottom: 15px;
  font-size: 5px;
  color: #999999;
  background-color: #F8F8F8;
}
.local-a{
  padding-left: 5px;
  padding-top: 5px;
}
.local-b{
  padding-left: 5px;
  padding-top: 5px;
}
.local-c{
  padding-left: 5px;
  padding-top: 5px;
}
.local-d{
  padding-left: 5px;
  padding-top: 5px;
}
.local-e{
  padding-top: 5px;
  padding-left: 360px;
}

/* 回到顶部 */
.top{
        padding: 10px;
        background: rgba(0, 153, 229, .7);
        color: #fff;
        text-align: center;
        border-radius: 2px;
    }

</style>